<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="assets/css/colors.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/carousel.css">
    <link rel="stylesheet" href="assets/css/layout.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html" class="logo">我的博客</a>
            <div class="nav-container">
                <ul class="nav-links">
                    <li class="nav-dropdown">
                        <a href="index.html" class="active">首页</a>
                        <div class="dropdown-content">
                            <a href="start.html">起始页</a>
                            <a href="column.html">专栏</a>
                        </div>
                    </li>
                    <li class="nav-dropdown">
                        <a href="record.html">记录</a>
                        <div class="dropdown-content">
                            <a href="record.html">生活倒影</a>
                            <a href="study.html">学习</a>
                        </div>
                    </li>
                    <li class="nav-dropdown">
                        <a href="album.html">相册</a>
                        <div class="dropdown-content">
                            <a href="album_2024.html">2024</a>
                            <a href="album_2023.html">2023</a>
                            <a href="album_2022.html">2022</a>
                            <a href="album_2021.html">2021</a>
                        </div>
                    </li>
                    <li><a href="message.html">留言</a></li>
                </ul>
                <div class="nav-auth">
                    <a href="auth.html" class="login-btn">登录</a>
                    <div class="auth-divider"></div>
                    <a href="admin.html" class="admin-btn">管理</a>
                </div>
            </div>
        </nav>
    </header>

    <!-- 轮播图 -->
    <div class="carousel">
        <div class="carousel-container">
            <div class="carousel-slide">
                <img src="assets/images/start.png" alt="轮播图1">
                <div class="carousel-caption">
                    <h2>技术分享</h2>
                    <p>分享最新的技术动态和学习心得</p>
                </div>
            </div>
            <div class="carousel-slide">
                <img src="assets/images/start.png" alt="轮播图2">
                <div class="carousel-caption">
                    <h2>生活随笔</h2>
                    <p>记录生活中的精彩瞬间</p>
                </div>
            </div>
            <div class="carousel-slide">
                <img src="assets/images/start.png" alt="轮播图3">
                <div class="carousel-caption">
                    <h2>个人成长</h2>
                    <p>分享个人成长和经验心得</p>
                </div>
            </div>
        </div>
        <button class="carousel-button prev">&lt;</button>
        <button class="carousel-button next">&gt;</button>
        <div class="carousel-dots"></div>
    </div>

    <main>
        <div class="main-container">
            <!-- 左侧边栏 -->
            <aside class="sidebar">
                <!-- 用户信息 -->
                <div class="user-profile">
                    <div class="avatar">
                        <img src="assets/images/header.jpg" alt="用户头像">
                    </div>
                    <h3 class="username">Augenstern</h3>
                    <p class="user-description">热爱术，热爱生活</p>
                </div>

                <!-- 搜索栏 -->
                <div class="search-box">
                    <input type="text" placeholder="搜索文章...">
                    <button type="button"><i class="search-icon">🔍</i></button>
                </div>

                <!-- 推荐文章 -->
                <div class="recommended-posts">
                    <h4>推荐文章</h4>
                    <ul>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/50x50" alt="推荐文章1">
                                <div class="post-info">
                                    <h5>推荐文章标题1</h5>
                                    <span>2024-03-15</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/50x50" alt="推荐文章2">
                                <div class="post-info">
                                    <h5>推荐文章标题2</h5>
                                    <span>2024-03-14</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- 标签云 -->
                <div class="tags-container">
                    <h4>文章标签</h4>
                    <div class="tags-grid">
                        <div class="tag-card" style="background: var(--tag-color-1)">
                            <span class="tag-name">技术</span>
                            <span class="tag-count">12</span>
                        </div>
                        <div class="tag-card" style="background: var(--tag-color-2)">
                            <span class="tag-name">生活</span>
                            <span class="tag-count">8</span>
                        </div>
                        <div class="tag-card" style="background: var(--tag-color-3)">
                            <span class="tag-name">学习</span>
                            <span class="tag-count">15</span>
                        </div>
                        <div class="tag-card" style="background: var(--tag-color-4)">
                            <span class="tag-name">随笔</span>
                            <span class="tag-count">6</span>
                        </div>
                        <div class="tag-card" style="background: var(--tag-color-5)">
                            <span class="tag-name">前端</span>
                            <span class="tag-count">20</span>
                        </div>
                        <div class="tag-card" style="background: var(--tag-color-6)">
                            <span class="tag-name">后端</span>
                            <span class="tag-count">10</span>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- 右侧主要内容 -->
            <div class="main-content">
                <h2>最新文章</h2>
                <div class="post-grid">
                    <article class="post-card">
                        <img src="assets/images/start.png" alt="文章图片">
                        <div class="post-content">
                            <h3>示例文章标题1</h3>
                            <p>这是一段文章预览内容，展示文章的主要内容...</p>
                            <span class="post-date">2024-03-20</span>
                        </div>
                    </article>
                    <article class="post-card">
                        <img src="https://via.placeholder.com/300x200" alt="文章图片">
                        <div class="post-content">
                            <h3>示例文章标题2</h3>
                            <p>这是一段文章预览内容，展示文章的主要内容...</p>
                            <span class="post-date">2024-03-19</span>
                        </div>
                    </article>
                    <article class="post-card">
                        <img src="https://via.placeholder.com/300x200" alt="文章图片">
                        <div class="post-content">
                            <h3>示例文章标题3</h3>
                            <p>这是一段文章预览内容，展示文章的主要内容...</p>
                            <span class="post-date">2024-03-18</span>
                        </div>
                    </article>
                    <article class="post-card">
                        <img src="https://via.placeholder.com/300x200" alt="文章图片">
                        <div class="post-content">
                            <h3>示例文章标题4</h3>
                            <p>这是一段文章预览内容，展示文章的主要内容...</p>
                            <span class="post-date">2024-03-17</span>
                        </div>
                    </article>
                    <article class="post-card">
                        <img src="https://via.placeholder.com/300x200" alt="文章图片">
                        <div class="post-content">
                            <h3>示例文章标题5</h3>
                            <p>这是一段文章预览内容，展示文章的主要内容...</p>
                            <span class="post-date">2024-03-16</span>
                        </div>
                    </article>
                    <article class="post-card">
                        <img src="https://via.placeholder.com/300x200" alt="文章图片">
                        <div class="post-content">
                            <h3>示例文章标题6</h3>
                            <p>这是一段文章预览内容，展示文章的主要内容...</p>
                            <span class="post-date">2024-03-15</span>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于博主</h4>
                <p>一个热爱分享的博主，专注于技术与生活。</p>
            </div>
            <div class="footer-section">
                <h4>联系方式</h4>
                <p>Email: example@email.com</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 我的博客. 保留所有权。</p>
        </div>
    </footer>

    <script src="assets/js/script.js"></script>
    <script src="assets/js/carousel.js"></script>
    <script src="assets/js/nav.js"></script>
</body>
</html>